<template>
  <n-form
    :labelPlacement="formOption.labelPlacement"
    :label-width="formOption.labelWidth"
    :size="formOption.size"
    :rules="rules"
    :model="form"
    :style="formStyle"
    show-feedback
  >
    <n-form-item
      v-for="item in fields.filter((row) => row.type != 'hidden')"
      :path="item.name"
      :label="item.label"
      :style="gridStyle(item)"
    >
      <input-item :widget="item" v-model:value="form[item.name]" />
    </n-form-item>
    <input type="hidden" v-for="item in fields.filter((row) => row.type == 'hidden')" :value="form[item.name]"/>
  </n-form>
</template>
<script>
import InputItem from "./InputItem.vue";
import { computed } from "vue";
export default {
  name: "GenarateForm",
  props: {
    formOption: {
      type: Object,
      required: true,
    },
    fields: {
      type: Array,
      required: true,
    },
    rules: {
      type: Object,
    },
    form: {
      type: Object,
      require: true,
    },
  },
  components: { InputItem },
  setup(props) {
    const formStyle = computed(() => {
      let frs = [];
      for (let i = 0; i < props.formOption.col; i++) {
        frs.push("1fr");
      }
      return {
        position: "relative",
        display: "grid",
        padding: "10px",
        gridTemplateColumns: frs.join(" "),
        overflow: "auto",
        columnGap: "10px",
      };
    });
    const gridStyle = (item) => {
      let style = {
        gridColumn: "span " + item.col,
        gridRow: "span " + item.row,
        position: "relative",
        gridAutoFlow: "dense",
      };
      if (item.selected) {
        // style.backgroundColor = "rgba(99, 226, 183,0.3)";
        style.border = "1px solid #63e2b7";
      }
      return style;
    };
    return {
      formStyle,
      gridStyle,
    };
  },
};
</script>
